import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form, Row, Col } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const SelelctModel = (props) => {
  const { loading, list, visible = {}, onClose, onOk } = props;
  const { show = false, details = [] } = visible;
  const childRef = useRef();
  const modalProps = {
    title: `选择信息采集`,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    if (show) {
      setSelectedRowKeys(details);
    } else {
      setSelectedRowKeys([]);
    }
  }, [show]);
  // 搜索参数

  const searchItems = [
    {
      label: '请输入名称',
      name: 'keyword',
    },
    {
      label: '商品编码',
      name: 'goodsCode',
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '是否允许充分',
      dataIndex: 'repeatFlag',
      render: (e) => {
        return {
          0: '不允许',
          1: '允许'
        }[e]
      }
    },
    {
      title: '是否允许独立采集',
      dataIndex: 'independentFlag',
      render: (e) => {
        return {
          0: '不允许',
          1: '允许'
        }[e]
      }
    },
    {
      title: '是否引流',
      dataIndex: 'increaseSetting',
      render: (e) => {
        return {
          0: '否',
          1: '是'
        }[e]
      }
    },
    {
      title: '采集数量',
      dataIndex: 'recordAmount',
    },
  ];
  return (
    <>
      <Modal
        {...modalProps}
        onCancel={onClose}
        onOk={() => {
          onOk && onOk(selectedRowKeys);
          onClose();
        }}
      >
        <TableDataBlock
          rowSelection={rowSelection}
          cRef={childRef}
          loading={loading}
          searchItems={searchItems}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          dispatchType="selectionWindow/fetchInformationCollection"
          {...list}
        ></TableDataBlock>
      </Modal>
    </>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.informationCollectionList,
  loading: loading.effects['selectionWindow/informationCollectionList']
}))(SelelctModel);
